<template>
	<div class="h-500 w-414 bg-transparent relative overflow-hidden">
		<div
			v-for="n in 8"
			:key="n"
			class="w-40 h-40 bg-[#f00] absolute red-icon rounded-8px"
			:style="{
				'left': `${Math.random() * 374}px`,
				'animation-duration': `${Math.random() * 2 + 2.5}s`
			}"
			@click="handleClick(n)"
		></div>
	</div>
</template>

<script lang="ts" setup>
import { useHomeStore } from '@/store'

const homeStore = useHomeStore()
homeStore.fetchList()
const emit = defineEmits<{
	(e: 'clickPack', num: number): void
}>()

const handleClick = (num: number) => emit('clickPack', num)
</script>
<style scoped>
.red-icon {
	animation: down infinite linear;
}

@keyframes down {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(500px);
	}
}
</style>
